<template>
  <view v-if="visible" class="basic-profile-editor">
    <view class="editor-mask" @tap="onCancel"></view>
    <view class="editor-content">
      <!-- 顶部标题栏 -->
      <view class="editor-header">
        <text class="cancel-btn" @tap="onCancel">
          <text class="tn-icon-close"></text>
          <text style="margin-left: 4rpx;">取消</text>
        </text>
        <text class="title">
          <text class="title-icon tn-icon-user"></text>
          完善基础资料
        </text>
        <text class="save-btn" @tap="saveProfile">
          <text class="tn-icon-check"></text>
          <text style="margin-left: 4rpx;">提交</text>
        </text>
      </view>
      
      <!-- 审核状态提示 -->
      <view v-if="auditStatus && auditStatus.status !== null" class="audit-status-banner" :class="[
        auditStatus.status === 1 ? 'pending' : '',
        auditStatus.status === 2 ? 'approved' : '',
        auditStatus.status === 3 ? 'rejected' : ''
      ]">
        <view class="status-icon">
          <text v-if="auditStatus.status === 1" class="tn-icon-time"></text>
          <text v-if="auditStatus.status === 2" class="tn-icon-success"></text>
          <text v-if="auditStatus.status === 3" class="tn-icon-close"></text>
        </view>
        <view class="status-content">
          <text class="status-title">
            {{ auditStatus.status === 1 ? '资料审核中' : auditStatus.status === 2 ? '审核已通过' : '审核被拒绝' }}
          </text>
          <text v-if="auditStatus.status === 1" class="status-desc">您的资料正在审核中，请耐心等待</text>
          <text v-if="auditStatus.status === 2" class="status-desc">您的资料已通过审核</text>
          <text v-if="auditStatus.status === 3" class="status-desc">
            拒绝原因: {{ auditStatus.rejectReason || '未提供原因' }}
          </text>
        </view>
      </view>
      
      <!-- 表单区域 -->
      <scroll-view scroll-y class="editor-form">
        <!-- 头像上传区 -->
        <view class="avatar-section">
          <view class="avatar-wrapper" @tap="chooseImage('avatar')">
            <image class="avatar-image" :src="userProfile.avatar" mode="aspectFill"></image>
            <view class="avatar-upload-icon">
              <text class="tn-icon-camera"></text>
            </view>
          </view>
          <text class="avatar-tip">点击更换头像</text>
        </view>
        
        <!-- 昵称 -->
        <view class="form-item">
          <view class="form-label required">
            <text class="label-icon tn-icon-tag"></text>
            昵称
          </view>
          <input 
            type="text" 
            v-model="userProfile.nickname" 
            placeholder="请输入昵称（2-12个字符）" 
            maxlength="12" 
            class="form-input"
          />
        </view>
        
        <!-- 性别 -->
        <view class="form-item">
          <view class="form-label required">
            <text class="label-icon tn-icon-gender"></text>
            性别
            <text v-if="userInfo && userInfo.sex > 0" class="warning-text">(不可修改)</text>
          </view>
          <view class="gender-select" :class="{'disabled': userInfo && userInfo.sex > 0}">
            <view 
              class="gender-option" 
              :class="{
                'active': userProfile.gender === 1,
                'disabled': userInfo && userInfo.sex > 0 && userInfo.sex !== 1
              }"
              @tap="selectGender(1)"
            >
              <text class="gender-icon tn-icon-sex"></text>
              <text class="gender-text">男</text>
            </view>
            <view 
              class="gender-option" 
              :class="{
                'active': userProfile.gender === 2,
                'disabled': userInfo && userInfo.sex > 0 && userInfo.sex !== 2
              }"
              @tap="selectGender(2)"
            >
              <text class="gender-icon tn-icon-sex-female"></text>
              <text class="gender-text">女</text>
            </view>
          </view>
          <view v-if="!userInfo || !userInfo.sex" class="gender-tip">
            <text class="tn-icon-warning" style="margin-right: 6rpx; font-size: 22rpx;"></text>
            <text>请慎重选择，性别保存后将无法修改</text>
          </view>
        </view>
        
        <!-- 生日 -->
        <view class="form-item">
          <view class="form-label">
            <text class="label-icon tn-icon-calendar"></text>
            生日
          </view>
          <view class="form-input date-input" @tap="openDatePicker">
            <view class="input-content">
              <text class="tn-icon-calendar" style="margin-right: 10rpx; color: #999;"></text>
              <text v-if="userProfile.birthday">{{formatBirthday(userProfile.birthday)}}</text>
              <text v-else class="placeholder-text">请选择出生日期</text>
            </view>
            <text class="tn-icon-right form-arrow"></text>
          </view>
        </view>
      </scroll-view>
    </view>
    
    <!-- 日期选择器 - 使用更简单的滚动选择器代替日历 -->
    <tn-popup 
      ref="datePickerPopup" 
      mode="bottom" 
      backgroundColor="#050505"
      :borderRadius="32"
    >
      <view class="picker-container">
        <view class="picker-header">
          <text class="cancel-btn" @tap="closeDatePicker">
            <text class="tn-icon-close"></text>
            <text style="margin-left: 4rpx;">取消</text>
          </text>
          <view class="title">
            <text class="tn-icon-calendar-fill" style="margin-right: 6rpx;"></text>
            <text>选择生日</text>
          </view>
          <text class="confirm-btn" @tap="confirmDatePicker">
            <text class="tn-icon-success"></text>
            <text style="margin-left: 4rpx;">确定</text>
          </text>
        </view>
        <!-- 原生日期选择器 -->
        <picker-view 
          class="date-picker-view" 
          indicator-style="height: 80rpx;" 
          :value="datePickerIndex" 
          @change="onDatePickerChange"
        >
          <picker-view-column>
            <view class="picker-item" v-for="(year, index) in years" :key="'year-'+index">{{year}}年</view>
          </picker-view-column>
          <picker-view-column>
            <view class="picker-item" v-for="(month, index) in months" :key="'month-'+index">{{month}}月</view>
          </picker-view-column>
          <picker-view-column>
            <view class="picker-item" v-for="(day, index) in days" :key="'day-'+index">{{day}}日</view>
          </picker-view-column>
        </picker-view>
      </view>
    </tn-popup>
    
    <!-- 加载指示器 -->
    <tn-popup 
      ref="loadingPopup" 
      mode="center" 
      class="loading-popup"
      backgroundColor="#050505"
      :borderRadius="24"
    >
      <tn-loading :show="true"></tn-loading>
    </tn-popup>
  </view>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import API from '@/api/index.js';

export default {
  name: 'BasicProfileEditor',
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      userProfile: {
        avatar: 'https://picsum.photos/seed/user1/200', // 默认头像
        nickname: '',
        gender: 0, // 0: 未设置, 1: 男, 2: 女
        birthday: ''
      },
      // 审核状态
      auditStatus: null,
      // 日期选择临时值
      tempBirthday: '',
      // 日期范围
      startDate: '',
      endDate: '',
      datePickerIndex: [0, 0, 0],
      years: [],
      months: [],
      days: [],
      // 上传进度
      uploadProgress: 0,
      isUploading: false
    }
  },
  computed: {
    ...mapState('user', ['userInfo']),
  },
  watch: {
    visible(newVal) {
      if (newVal) {
        this.initUserProfile();
        this.fetchProfileAuditStatus();
      }
    }
  },
  methods: {
    ...mapActions('user', ['updateUserProfile', 'submitUserProfileForAudit', 'getProfileAuditStatus']),
    
    // 取消编辑
    onCancel() {
      this.$emit('cancel');
    },
    
    // 获取审核状态
    async fetchProfileAuditStatus() {
      try {
        this.auditStatus = await this.getProfileAuditStatus();
        console.log('获取到审核状态:', this.auditStatus);
      } catch (error) {
        console.error('获取审核状态失败:', error);
      }
    },
    
    // 保存资料
    async saveProfile() {
      // 验证必填项
      if (!this.userProfile.nickname) {
        uni.showToast({
          title: '请填写昵称',
          icon: 'none'
        });
        return;
      }
      
      if (this.userProfile.gender === 0) {
        uni.showToast({
          title: '请选择性别',
          icon: 'none'
        });
        return;
      }
      
      // 显示加载状态
      this.$refs.loadingPopup.open();
      
      try {
        // 将前端数据格式转换为后端API所需格式
        const apiData = {
          nickname: this.userProfile.nickname,
          avatar: this.userProfile.avatar,
          sex: this.userProfile.gender, // 前端gender映射到后端sex
          birthday: this.userProfile.birthday
        };
        
        // 处理生日字段
        if (this.userProfile.birthday) {
          // 转换日期格式为YYYY-MM-DD
          const birthDate = new Date(this.userProfile.birthday);
          const year = birthDate.getFullYear();
          const month = String(birthDate.getMonth() + 1).padStart(2, '0');
          const day = String(birthDate.getDate()).padStart(2, '0');
          apiData.birthday = `${year}-${month}-${day}`;
        }
        
        console.log('提交基础资料数据:', apiData);
        
        // 调用Vuex action提交审核资料 (新的方法)
        await this.submitUserProfileForAudit(apiData);
        
        // 隐藏加载状态
        this.$refs.loadingPopup.close();
        
        // 提示成功
        uni.showToast({
          title: '提交成功，等待审核',
          icon: 'success'
        });
        
        // 更新审核状态
        await this.fetchProfileAuditStatus();
        
        // 通知父组件保存成功
        this.$emit('success');
      } catch (error) {
        console.error('提交资料失败:', error);
        
        // 隐藏加载状态
        this.$refs.loadingPopup.close();
        
        // 提示错误
        uni.showToast({
          title: '提交失败，请重试',
          icon: 'none'
        });
      }
    },
    
    // 选择图片
    chooseImage(type) {
      // 如果正在上传，不允许重复选择
      if (this.isUploading) {
        uni.showToast({
          title: '正在上传中，请稍候',
          icon: 'none'
        });
        return;
      }
      
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'], // 压缩图片
        sourceType: ['album', 'camera'],
        success: (res) => {
          const tempFilePath = res.tempFilePaths[0];
          
          // 上传图片
          this.uploadImage(tempFilePath, type);
        }
      });
    },
    
    // 上传图片
    async uploadImage(filePath, type) {
      // 显示上传中
      this.isUploading = true;
      this.uploadProgress = 0;
      
      uni.showLoading({
        title: '上传中...',
        mask: true
      });
      
      try {
        // 调用实际的上传API
        const imageUrl = await API.upload.uploadFile({
          filePath: filePath,
          fileType: type,
          onProgress: (progress) => {
            this.uploadProgress = progress;
            // 可以在这里更新上传进度UI
          }
        });
        
        // 上传成功，更新头像URL为服务器返回的URL
        if (type === 'avatar') {
          this.userProfile.avatar = imageUrl;
        }
        
        uni.hideLoading();
        uni.showToast({
          title: '上传成功',
          icon: 'success'
        });
      } catch (error) {
        console.error('上传图片失败:', error);
        uni.hideLoading();
        uni.showToast({
          title: '上传失败，请重试',
          icon: 'none'
        });
      } finally {
        this.isUploading = false;
      }
    },
    
    // 初始化日期范围
    initDateRange() {
      // 初始化年份数组 - 从1940年到当前年份
      const currentYear = new Date().getFullYear();
      this.years = [];
      for (let i = 1940; i <= currentYear; i++) {
        this.years.push(i);
      }
      
      // 初始化月份数组 - 1到12月
      this.months = [];
      for (let i = 1; i <= 12; i++) {
        this.months.push(i);
      }
      
      // 初始化天数数组 - 默认31天
      this.updateDays();
      
      // 设置默认选中日期为1994年7月18日
      this.setDefaultDate('1994-07-18');
    },
    
    // 更新天数数组
    updateDays() {
      // 获取当前选择的年月
      const year = this.years[this.datePickerIndex[0]] || new Date().getFullYear();
      const month = this.months[this.datePickerIndex[1]] || 1;
      
      // 获取该月的天数
      const daysInMonth = new Date(year, month, 0).getDate();
      
      // 更新天数数组
      this.days = [];
      for (let i = 1; i <= daysInMonth; i++) {
        this.days.push(i);
      }
    },
    
    // 设置默认日期
    setDefaultDate(dateStr) {
      if (!dateStr) return;
      
      const date = new Date(dateStr);
      if (isNaN(date.getTime())) return;
      
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      
      // 查找对应索引
      const yearIndex = this.years.findIndex(y => y === year);
      const monthIndex = this.months.findIndex(m => m === month);
      
      this.datePickerIndex = [
        yearIndex > -1 ? yearIndex : 0, 
        monthIndex > -1 ? monthIndex : 0,
        Math.min(day - 1, this.days.length - 1)
      ];
      
      // 同步更新tempBirthday
      this.updateTempBirthday();
    },
    
    // 日期选择回调
    onDatePickerChange(e) {
      const index = e.detail.value;
      
      // 如果年或月发生变化，需要更新天数
      if (index[0] !== this.datePickerIndex[0] || index[1] !== this.datePickerIndex[1]) {
        this.datePickerIndex = [index[0], index[1], 0]; // 重置日为1日
        this.updateDays();
      } else {
        this.datePickerIndex = index;
      }
      
      // 更新日期字符串
      this.updateTempBirthday();
    },
    
    // 更新临时生日字符串
    updateTempBirthday() {
      const year = this.years[this.datePickerIndex[0]];
      const month = this.months[this.datePickerIndex[1]];
      const day = this.days[this.datePickerIndex[2]];
      
      if (year && month && day) {
        // 格式化为YYYY-MM-DD
        this.tempBirthday = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
      }
    },
    
    // 打开日期选择器
    openDatePicker() {
      // 确保日期范围已初始化
      if (this.years.length === 0) {
        this.initDateRange();
      }
      
      // 如果有生日，设置当前选择的日期
      if (this.userProfile.birthday) {
        this.setDefaultDate(this.userProfile.birthday);
      }
      
      // 打开弹窗
      this.$refs.datePickerPopup.open();
    },
    
    // 关闭日期选择器
    closeDatePicker() {
      this.$refs.datePickerPopup.close();
    },
    
    // 确认日期选择
    confirmDatePicker() {
      this.userProfile.birthday = this.tempBirthday;
      this.$refs.datePickerPopup.close();
    },
    
    // 初始化用户资料
    initUserProfile() {
      // 从store中获取用户信息
      if (this.userInfo) {
        this.userProfile.avatar = this.userInfo.avatar || this.userProfile.avatar;
        this.userProfile.nickname = this.userInfo.nickname || '';
        
        // sex字段映射到gender字段
        this.userProfile.gender = this.userInfo.sex || 0;
        
        // 使用默认生日：1994年7月18日
        if (!this.userInfo.birthday) {
          this.userProfile.birthday = '1994-07-18';
        } else {
          this.userProfile.birthday = this.userInfo.birthday;
        }
        
        // 初始化临时生日 - 使用生日或默认日期
        this.tempBirthday = this.userProfile.birthday || '1994-07-18';
      } else {
        // 如果没有用户信息，设置默认生日
        this.userProfile.birthday = '1994-07-18';
        this.tempBirthday = '1994-07-18';
      }
    },
    
    // 选择性别
    selectGender(value) {
      // 如果用户已经设置性别并且在服务器上保存过，不允许修改
      if (this.userInfo && this.userInfo.sex > 0) {
        uni.showToast({
          title: '性别一旦保存无法修改',
          icon: 'none'
        });
        return;
      }
      
      // 设置性别
      this.userProfile.gender = value;
    },
    
    // 格式化生日显示
    formatBirthday(date) {
      if (!date) return '';
      
      // 将日期格式化为年月日
      const dateObj = new Date(date);
      const year = dateObj.getFullYear();
      const month = String(dateObj.getMonth() + 1).padStart(2, '0');
      const day = String(dateObj.getDate()).padStart(2, '0');
      
      return `${year}-${month}-${day}`;
    },
  },
  mounted() {
    if (this.visible) {
      this.initUserProfile();
      this.fetchProfileAuditStatus();
    }
    
    // 初始化日期选择范围
    this.initDateRange();
  }
}
</script>

<style lang="scss" scoped>
.basic-profile-editor {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  
  .editor-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
  }
  
  .editor-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #050505;
    border-top-left-radius: 32rpx;
    border-top-right-radius: 32rpx;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slide-up 0.3s ease;
    box-shadow: 0 -8rpx 24rpx rgba(0, 0, 0, 0.5);
    
    .editor-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx;
      border-bottom: 1rpx solid rgba(255, 255, 255, 0.08);
      
      .title {
        font-size: 34rpx;
        font-weight: bold;
        color: #ffffff;
        display: flex;
        align-items: center;
        
        .title-icon {
          margin-right: 8rpx;
          font-size: 38rpx;
          color: #B3F73C;
          background: linear-gradient(135deg, #8eac21, #B3F73C);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
      
      .cancel-btn {
        font-size: 28rpx;
        color: #999;
        padding: 8rpx 12rpx;
        border-radius: 8rpx;
        transition: all 0.2s ease;
        
        &:active {
          background-color: rgba(255, 255, 255, 0.05);
          transform: scale(0.95);
        }
      }
      
      .save-btn {
        font-size: 28rpx;
        color: #B3F73C;
        font-weight: bold;
        background: linear-gradient(135deg, rgba(142, 172, 33, 0.1), rgba(179, 247, 60, 0.1));
        padding: 8rpx 16rpx;
        border-radius: 24rpx;
        border: 1rpx solid rgba(179, 247, 60, 0.2);
        transition: all 0.2s ease;
        
        &:active {
          transform: scale(0.95);
          background: linear-gradient(135deg, rgba(142, 172, 33, 0.2), rgba(179, 247, 60, 0.2));
        }
      }
    }
    
    .editor-form {
      padding: 30rpx;
      max-height: calc(85vh - 90rpx);
      
      .avatar-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 40rpx;
        
        .avatar-wrapper {
          width: 160rpx;
          height: 160rpx;
          border-radius: 50%;
          position: relative;
          margin-bottom: 16rpx;
          border: 2rpx solid rgba(179, 247, 60, 0.3);
          overflow: hidden;
          box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.3);
          transition: all 0.3s ease;
          
          &:active {
            transform: scale(0.95);
            box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.3);
          }
          
          .avatar-image {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
          
          .avatar-upload-icon {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 50rpx;
            height: 50rpx;
            background: linear-gradient(135deg, #8eac21, #B3F73C);
            color: #020303;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 26rpx;
            box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.3);
          }
        }
        
        .avatar-tip {
          font-size: 24rpx;
          color: #999;
          margin-top: 8rpx;
        }
      }
      
      .form-item {
        padding: 24rpx 0;
        border-bottom: 1rpx solid rgba(255, 255, 255, 0.08);
        
        &:last-child {
          border-bottom: none;
        }
        
        .form-label {
          font-size: 28rpx;
          color: #e0e0e0;
          margin-bottom: 16rpx;
          display: flex;
          align-items: center;
          
          .label-icon {
            font-size: 32rpx;
            margin-right: 8rpx;
            color: #B3F73C;
            opacity: 0.8;
          }
          
          &.required::after {
            content: '*';
            color: #ff4d4f;
            margin-left: 6rpx;
          }
          
          .warning-text {
            font-size: 22rpx;
            color: #ff9900;
            margin-left: 10rpx;
            font-weight: normal;
          }
        }
        
        .form-input {
          background-color: #0f0f0f;
          height: 90rpx;
          border-radius: 16rpx;
          padding: 0 24rpx;
          font-size: 28rpx;
          color: #e0e0e0;
          display: flex;
          align-items: center;
          box-shadow: inset 0 2rpx 6rpx rgba(0, 0, 0, 0.2);
          border: 1rpx solid rgba(255, 255, 255, 0.05);
          transition: all 0.3s ease;
          
          &:focus {
            border: 1rpx solid rgba(179, 247, 60, 0.3);
            box-shadow: 0 0 0 2rpx rgba(179, 247, 60, 0.1);
          }
          
          .placeholder-text {
            color: #666;
          }
          
          .form-arrow {
            position: absolute;
            right: 20rpx;
            color: #666;
            font-size: 24rpx;
          }
        }
        
        .date-input {
          position: relative;
          
          .input-content {
            display: flex;
            align-items: center;
          }
          
          .form-arrow {
            position: absolute;
            right: 20rpx;
            color: #666;
            font-size: 24rpx;
          }
        }
        
        .gender-tip {
          font-size: 22rpx;
          color: #ff9900;
          margin-top: 10rpx;
          display: flex;
          align-items: center;
        }
        
        .gender-select {
          display: flex;
          
          &.disabled {
            opacity: 0.8;
          }
          
          .gender-option {
            flex: 1;
            height: 90rpx;
            background-color: #0f0f0f;
            margin-right: 20rpx;
            border-radius: 16rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1rpx solid rgba(255, 255, 255, 0.05);
            box-shadow: inset 0 2rpx 6rpx rgba(0, 0, 0, 0.2);
            transition: all 0.2s ease;
            
            &:last-child {
              margin-right: 0;
            }
            
            &.active {
              background: linear-gradient(135deg, rgba(142, 172, 33, 0.2), rgba(179, 247, 60, 0.2));
              border: 1rpx solid rgba(179, 247, 60, 0.5);
              box-shadow: 0 4rpx 8rpx rgba(179, 247, 60, 0.1);
              
              .gender-icon, .gender-text {
                color: #B3F73C;
              }
            }
            
            &.disabled {
              background-color: rgba(15, 15, 15, 0.5);
              color: #666;
            }
            
            &:not(.disabled):active {
              transform: scale(0.98);
            }
            
            .gender-icon {
              font-size: 32rpx;
              margin-right: 10rpx;
              color: #999;
            }
            
            .gender-text {
              font-size: 28rpx;
              color: #e0e0e0;
            }
          }
        }
      }
    }
  }
}

@keyframes slide-up {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.picker-container {
  background-color: #050505;
  border-top-left-radius: 32rpx;
  border-top-right-radius: 32rpx;
  overflow: hidden;
  box-shadow: 0 -8rpx 24rpx rgba(0, 0, 0, 0.5);
  
  .picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1rpx solid rgba(255, 255, 255, 0.08);
    
    .title {
      font-size: 34rpx;
      font-weight: bold;
      color: #ffffff;
      display: flex;
      align-items: center;
      
      .tn-icon-calendar-fill {
        color: #B3F73C;
        background: linear-gradient(135deg, #8eac21, #B3F73C);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
    
    .cancel-btn, .confirm-btn {
      font-size: 28rpx;
      display: flex;
      align-items: center;
      padding: 8rpx 12rpx;
      border-radius: 8rpx;
      transition: all 0.2s ease;
    }
    
    .cancel-btn {
      color: #999;
      
      &:active {
        background-color: rgba(255, 255, 255, 0.05);
        transform: scale(0.95);
      }
    }
    
    .confirm-btn {
      color: #B3F73C;
      font-weight: bold;
      background: linear-gradient(135deg, rgba(142, 172, 33, 0.1), rgba(179, 247, 60, 0.1));
      padding: 8rpx 16rpx;
      border-radius: 24rpx;
      border: 1rpx solid rgba(179, 247, 60, 0.2);
      
      &:active {
        transform: scale(0.95);
        background: linear-gradient(135deg, rgba(142, 172, 33, 0.2), rgba(179, 247, 60, 0.2));
      }
    }
  }
  
  .date-picker-view {
    height: 400rpx;
    width: 100%;
    color: #ffffff;
    text-align: center;
  }
  
  .picker-item {
    line-height: 80rpx;
    color: #ffffff;
    text-align: center;
    font-size: 32rpx;
  }
}

.loading-popup {
  .tn-popup__content {
    border-radius: 24rpx !important;
    overflow: hidden !important;
    background-color: #050505 !important;
    padding: 40rpx !important;
    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.5) !important;
  }
}

.audit-status-banner {
  padding: 24rpx 30rpx;
  display: flex;
  align-items: center;
  border-bottom: 1rpx solid rgba(255, 255, 255, 0.08);
  margin-bottom: 10rpx;
  
  &.pending {
    background-color: rgba(255, 153, 0, 0.1);
  }
  
  &.approved {
    background-color: rgba(179, 247, 60, 0.1);
  }
  
  &.rejected {
    background-color: rgba(255, 77, 79, 0.1);
  }
  
  .status-icon {
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20rpx;
    font-size: 32rpx;
    background-color: rgba(0, 0, 0, 0.2);
    box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2);
  }
  
  .pending .status-icon {
    color: #ff9900;
  }
  
  .approved .status-icon {
    color: #B3F73C;
  }
  
  .rejected .status-icon {
    color: #ff4d4f;
  }
  
  .status-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    
    .status-title {
      font-size: 28rpx;
      font-weight: bold;
      margin-bottom: 8rpx;
    }
    
    .status-desc {
      font-size: 24rpx;
      color: #999;
    }
  }
}
</style>
